<template>
  <view class="container">
    <scroll-view scroll-y="true" style="width: 100%; height: 100vh">
      <!-- 头部 -->
      <view class="headerbgc" :style="[top]">
        <image src="../../../static/icon/place.png" mode="" style="width: 28rpx; height: 32rpx; margin: 0 10rpx 0 30rpx"></image>
        <view style="font-size: 28rpx; color: #fff; margin-right: 10rpx; width: 90rpx; text-overflow: ellipsis; overflow: hidden; white-space: nowrap" @click="goposition">
          {{ city }}
        </view>
        <view style="display: flex; align-items: center; position: relative">
          <image src="../../../static/icon/search.png" mode="" style="width: 28rpx; height: 28rpx; position: absolute; left: 30rpx; z-index: 2"></image>
          <input type="text" class="ipt" @blur="search" placeholder="搜索文章" placeholder-style="color:#fff" placeholder-class="txtwhiite" v-model="title" />
        </view>
      </view>
      <!-- 版心 -->
      <swiper :autoplay="true" :interval="3000" :duration="1000" style="box-sizing: border-box; width: 710rpx; height: 320rpx; margin: 20rpx">
        <swiper-item class="banner" v-for="item in swiperlist" :key="item.id" @click="goarticle(item.content)">
          <image :src="imgUrl + item.url" mode="aspectFill"></image>
        </swiper-item>
      </swiper>

      <!-- 接单 -->
      <view style="box-sizing: border-box; display: flex; margin-left: 20rpx">
        <view class="leftbox" @click="goreciveorder">
          <view style="font-size: 30rpx; font-weight: bold">接单中心</view>
          <image src="/static/img/jiedan.png" mode="aspectFill" style="width: 160rpx; height: 160rpx"></image>
        </view>
        <view class="rightbox" @click="goyuyue">
          <view style="font-size: 30rpx; font-weight: bold">上课预约</view>
          <image src="/static/img/yuyue.png" mode="aspectFill" style="width: 160rpx; height: 160rpx"></image>
        </view>
      </view>
      <!-- 预约提示 -->
      <view class="yuyuetip" @click="goyuyue" v-if="Object.keys(obj).length != 0 && obj.data.length != 0">
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #222222">您收到了上课预约</view>
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #3553e8">去查看</view>
      </view>
      <!-- 上课列表 -->
      <view class="listtitle" v-if="Object.keys(obj).length != 0 && obj.data.length != 0">上课列表</view>
      <scroll-view
        v-if="Object.keys(obj).length != 0 && obj.data.length != 0"
        scroll-y="true"
        style="box-sizing: border-box; width: 710rpx; height: 320rpx; background: #f9f9f9; border-radius: 20rpx 20rpx 20rpx 20rpx; margin: 20rpx; padding: 0 30rpx"
      >
        <view class="list" v-for="item in obj.data" :key="item.order_id" @click="goyuyuedetail(item.order_id)">
          <view class="item2">
            <view class="top">{{ item.time_slot }}</view>
            <view class="bottom">{{ item.grade_name + item.subject_name }}</view>
          </view>
          <view class="item2">
            <view class="top">{{ item.name }}</view>
            <view class="bottom">{{ item.week_time }}</view>
          </view>
          <view class="item2" style="width: 180rpx; height: 120rpx; background: #3553e8; border-radius: 20rpx 20rpx 20rpx 20rpx; color: #fff">
            <view class="top" v-if="item.agotime.agotimeIs == 1">距上课还有</view>
            <view class="bottom">{{ item.agotime.agotimeIs == 2 ? item.agotime.agotime + '上课' : item.agotime.agotime }}</view>
          </view>
        </view>
      </scroll-view>
      <!-- 案例分享 -->
      <view class="title">案例分享</view>
      <view class="item" @click="goarticledetail(item.id)" v-for="item in obj.article" :key="item.id">
        <image :src="imgUrl + item.pic" mode="aspectFill" v-if="item.pic != ''"></image>
        <view style="box-sizing: border-box; padding-left: 10rpx; font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">{{ item.title }}</view>
      </view>
    </scroll-view>
    <view style="width: 750rpx; height: 100rpx"></view>
  </view>
</template>

<script>
import { qqmap } from '@/utils/qqmap.js';
export default {
  data() {
    return {
      imgUrl: '', // 图片的基地址
      isiphone: false,
      title: '', // 搜索的文章标题
      page: 1, // 分页
      top: {
        paddingTop: '0rpx'
      },
      obj: {}, // 首页的数据
      swiperlist: [], // 轮播图数据
      city: '', // 城市
      timer: null
    };
  },

  methods: {
    // 跳转轮播图详情
    goarticle(txt) {
      uni.navigateTo({
        url: '/pages/swiperdetail/swiperdetail?txt=' + encodeURIComponent(txt)
      });
    },
    // 跳转详情
    goyuyuedetail(id) {
      uni.navigateTo({
        url: '/teacher/yuyuedetail/yuyuedetail?id=' + id
      });
    },
    // 搜索文章
    async search() {
      if (this.title != '') {
        const res = await uni.$http.post('/news/articleList', {
          page: this.page,
          type: 'teacher',
          category_id: '5',
          title: this.title
        });

        if (res.data.data.length != 0) {
          console.log('搜索的文章', res.data.data.list);
          this.obj.article = res.data.data.list;
        }
      } else {
        this.getindexdata();
      }
    },
    // 跳转到定位页面
    goposition() {
      uni.navigateTo({
        url: '/parents/position/position'
      });
    },
    // 获取首页的轮播图
    async getswiperlist() {
      const res = await uni.$http.post('/news/banner', {
        type: 'teacher'
      });
      console.log('轮播图数据--', res.data.data);
      this.swiperlist = res.data.data.list;
    },
    //获取首页数据
    async getindexdata() {
      const res = await uni.$http.post('/teacher/index');
      // console.log('首页的数据', res);
      this.obj = res.data.data;
      // console.log('首页的数据', this.obj);
    },
    // 获取用户当前的位置
    getuserloacl() {
      uni.getLocation({
        success: (res) => {
          let url = `https://apis.map.qq.com/ws/geocoder/v1/?location=`;
          this.$jsonp(url, {
            key: '5ZKBZ-M5CCV-M4EP2-5JRNX-KCZBQ-MCFA4',
            location: res.latitude + ',' + res.longitude,
            output: 'jsonp'
          }).then((res) => {
            this.city = res.result.address_component.city;
          });
          // qqmap.reverseGeocoder({
          //   location: {
          //     latitude: res.latitude,
          //     longitude: res.longitude
          //   },
          //   success: (res) => {
          //     console.log('地址已解析后的位置', res);
          //     this.city = res.result.address_component.city;
          //     // this.location = res.result.location;
          //   }
          // });
        }
      });
    },
    // 轮播图跳转到详情
    godetail(id) {
      uni.navigateTo({
        url: '/parents/articledetail/articledetail?id=' + id
      });
    },
    // 跳转到文章详情
    goarticledetail(id) {
      uni.navigateTo({
        url: '/parents/articledetail/articledetail?id=' + id
      });
    },
    // 跳转到预约
    goyuyue() {
      uni.navigateTo({
        url: '/teacher/yuyue/yuyue'
      });
    },
    // 跳转到接单中心
    goreciveorder() {
      uni.navigateTo({
        url: '/teacher/reciveorder/reciveorder'
      });
    }
  },
  created() {
    // 获取轮播图数据
    this.getswiperlist();
    //获取首页数据
    this.getindexdata();
    this.timer = setInterval(() => {
      this.getindexdata();
    }, 2000);
    // 获取用户当前位置
    this.getuserloacl();
    // 配置图片的基地址
    this.imgUrl = this.imgurl;
    // 顶部适配
    const app = getApp();
    this.isiphone = app.$vm.isIPhone;
    if (this.isiphone) {
      this.top.paddingTop = app.$vm.liuhai + 'rpx';
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  destroyed() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .headerbgc {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 750rpx;
    height: 180rpx;
    background-color: #3553e8;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
  .ipt {
    box-sizing: border-box;
    position: absolute;
    left: 10rpx;
    width: 340rpx;
    height: 64rpx;
    background: #5d75ed;
    color: #fff;
    font-style: 26rpx;
    padding-left: 60rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
  }
  /deep/ .txtwhiite {
    color: #fff !important;
  }
  .banner {
    box-sizing: border-box;
    // margin: 20rpx;
    width: 710rpx;
    height: 320rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }
  .leftbox {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 340rpx;
    height: 180rpx;
    margin-right: 30rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
  .rightbox {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 340rpx;
    height: 180rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
  .title {
    margin-top: 30rpx;
    box-sizing: border-box;
    height: 42rpx;
    font-size: 30rpx;
    padding: 0 20rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #000000;
    line-height: 0rpx;
  }
  .item {
    padding: 0 20rpx;
    margin-bottom: 30rpx;
    image {
      width: 710rpx;
      height: 280rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
  }
  .yuyuetip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    width: 710rpx;
    height: 80rpx;
    margin: 20rpx;
    padding: 0 20rpx;
    background: #f4f6fe;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
  .listtitle {
    box-sizing: border-box;
    width: 120rpx;
    height: 42rpx;
    font-size: 30rpx;
    margin: 20rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #000000;
  }
  .list {
    box-sizing: border-box;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 650rpx;
    height: 120rpx;
    margin-top: 30rpx;
    background: #eff2ff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .item2 {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 33%;
      // height: 120rpx;
      .top {
        font-size: 28rpx;
      }
      .bottom {
        text-align: center;
        font-size: 30rpx;
      }
    }
  }
}
</style>
<style>
page {
  background-color: #ffffff;
}
</style>